/**
 * @Description:
 * @author 紫霞
 * @since 2019/1/17
 */
// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form, Select, Input, DatePicker, Button,Row,Col,Icon , Modal} from 'antd'
import moment from 'moment';
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY/MM/DD';
//导入路由组件，用于跳转等
import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'

// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './infoListStyle.less'
//引用listPage
import ListPage from 'widget/PageTmpl/ListPage'
import cx from 'classnames'
//权限管理
import FlagBtn from 'widget/FlagBtn/FlagView'
const confirm = Modal.confirm;

const Option = Select.Option;
/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */

const infoListAdminView = function({dispatch, model, form}) {
  // 表单的子函数
  const {resetFields, getFieldDecorator, validateFields, setFieldsValue} = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model

  // modelObj.xxx获取model中状态机的值
  let { areaList, businessIdList ,contentId} = modelObj
  // 资讯新增/编辑/详情页跳转
  function addOrEditSkip(type, id) {
    hashHistory.push({
      pathname: MODULE_TO_ROUTES[namespace].urlArray[0],
      query: { actionType: type, contentId:id }
    });
  }
  function getType(val){
    let list = [
      {"label": "商品房", "value": '1'},
      {"label": "保障房", "value": '2'},
      {"label": "改造", "value": '3'},
      {"label": "土地出让公告", "value": '10'},
      {"label": "土地划拨供地公示", "value": '11'},
      {"label": "土地成交信息", "value": '12'},
    ]
    let label = ""
    list.forEach(it =>{
      if(it.value == val){
        label =  it.label
      }
    })
    return label
  }
//删除
  function deleteContent(id) {
    confirm({
      title: '删除确认',
      content: '您真的要删除此条资讯吗?',
      okText: '确认',
      okType: 'primary',
      cancelText: '取消',
      onOk() {
        console.group(id)
        dispatch({
          type: `${namespace}/deleteContent`,
          payload:{contentId:id}
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  let pageProps = {
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      api_url: `admin/news/list`,
      // 接口方式
      method: "POST",
      // "data_field_name":"data",
      app: "",
      // 接口参数
      params: {
        channel:1
      },
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      mockData: null,
      // 查询栏
      search_bar: {
        fields: [
          // {
          //   en_name: 'province',
          //   zh_name: '省市',
          //   elem_type: 'Cascader',
          //   elem_valid_type: 'string',
          //   cmpt_items: areaList,
          //   split_keys: ['province', 'city'],
          //   //关联的更改的搜索字段
          //   related_key: 'businessId',
          //   //请求地址
          //   related_req_url: 'admin/estate/list',
          //   //默认请求
          //   related_req_param: {
          //     pageNo: 1,
          //     pageSize: 1000
          //   }
          // },
          {
            en_name: 'productName',
            zh_name: '所属项目',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          {
            en_name: 'title',
            zh_name: '资讯标题',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          // {
          //   en_name: 'channel',
          //   zh_name: '资讯类型',
          //   elem_type: 'Select',
          //   elem_valid_type: 'string',
          //   cmpt_items: [
          //     {
          //       value: '1',
          //       label: '动态资讯'
          //     },
          //     {
          //       value: '3',
          //       label: '活动报名'
          //     }
          //   ],
          // }
        ],
        searchHandler: () => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click')
        },
        resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click')
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'channel',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格  序号 资讯标题 所属项目  所属城市 创建人 创建时间 更新人 更新时间   操作
      table:
        {
          status_params: "status=0",
          status_text: "全部",
          // 表头字段列表
          scroll: { x: 1300 },
          fields: [
            {
              en_name: "key",
              zh_name: "序号",
              width: 60,
              render: (a, item, index, d, e, f) => {
                return index+1
              },
            },
            {
              en_name: "title",
              zh_name: "资讯标题",
              // width:180
            },
            // {
            //   en_name: "channel",
            //   zh_name: "资讯类型",
            //     width:100,
            //   render: (a, item, index, d, e, f) => {
            //      if(item.channel == 1){
            //       item.channel = '动态资讯'
            //     }else if(item.channel == 3){
            //       item.channel = '活动报名'
            //     }
            //     return (
            //         <span>{item.channel}</span>
            //     )
            //   }
            // },
            {
              en_name: "businessName",
              zh_name: "所属项目",
              width:150,
              render: (text, record) => {
                return <div className={styles.longEllipsis} title={text}>{text}</div>
              }
            },
            {
              en_name: "type",
              zh_name: "分类",
              width:90,
              render:(item) =>{
                return getType(item)
              }
            },
            {
              en_name: "cityName",
              zh_name: "所属城市",

              width:130,
              render: (a, item, index, d, e, f) => {
                return (
                  <span>
                      {item.provinceName} {item.cityName}
                  </span>
                )}
            },
            {
              en_name: "creator",
              zh_name: "创建人",
              width:80,
            },
            {
              en_name: "createTime",
              zh_name: "创建时间",
              width:180
            },
            {
              en_name: "updatePerson",
              zh_name: "更新人",
              width:80,
            },
            {
              en_name: "updateTime",
              zh_name: "更新时间",
              width:180
            },
            {
              en_name: "browseCount",
              zh_name: "点击量"
            },
            {
              en_name: "edit",
              zh_name: "操作",
              width:160,
              fixed:'right',
              render: (a, item, index, d, e, f) => {
                return (
                  <span>
                        <FlagBtn node={<a onClick={() => addOrEditSkip('detail',item.contentId)}>查看<span className="ant-divider" /></a>} btnId={'20102'}> </FlagBtn>
                        <FlagBtn node={<a onClick={() => addOrEditSkip('edit',item.contentId)}>编辑<span className="ant-divider" /></a>} btnId={'20103'}> </FlagBtn>
                        <FlagBtn node={<a onClick={() => deleteContent(item.contentId)}>删除</a>} btnId={'20104'}> </FlagBtn>
                        {/* <a onClick={() => deleteContent(item.contentId)}>删除</a> */}
                    </span>
                )
              },
            }
          ]
        },
      // 操作栏
      action_bar: [
        {
          func_name: "add",
          label: "发布政策资讯",
          btnId:'20101',
          type: "primary",
          onClick: (e) =>{
            hashHistory.push({
              pathname: MODULE_TO_ROUTES[namespace].urlArray[0],
              query: { actionType: 'add',  }
            });
          }
        }
      ]
    },
  }
  
  if (!!modelObj.biz) {
		pageProps.biz = modelObj.biz
		pageProps.biz.syncBackCbf = (biz) => {
			dispatch({
				type: `${namespace}/updateStore`,
				payload: { biz }
			})
		}
  }
  
  return (
    <div className={cx('pageLayout')}>
      <ListPage pageProps={pageProps}/>
    </div>
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(infoListAdminView))
